<template>
  <div class="tech-layout">
    <!-- 粒子背景 -->
    <ParticlesBackground />
    
    <!-- 主要布局 -->
    <el-container class="layout-container">
      <!-- 顶部导航 -->
      <el-header class="tech-header">
        <TechHeader />
      </el-header>
      
      <!-- 主体内容 -->
      <el-main class="tech-main">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
      
      <!-- 底部 -->
      <el-footer class="tech-footer">
        <TechFooter />
      </el-footer>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import TechHeader from './TechHeader.vue'
import TechFooter from './TechFooter.vue'
import ParticlesBackground from '../ParticlesBackground.vue'
</script>

<style scoped lang="scss">
.tech-layout {
  min-height: 100vh;
  position: relative;
}

.layout-container {
  min-height: 100vh;
  background: transparent;
}

.tech-header {
  background: rgba(10, 10, 15, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 212, 255, 0.2);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0;
}

.tech-main {
  padding: 20px;
  min-height: calc(100vh - 120px);
  background: transparent;
}

.tech-footer {
  background: var(--tech-bg-secondary);
  border-top: 1px solid rgba(0, 212, 255, 0.2);
  text-align: center;
  color: var(--tech-text-secondary);
}

@media (max-width: 768px) {
  .tech-main {
    padding: 16px;
  }
}
</style>